<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>pdf模拟测试</title>
  <link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet">
  <style>
    body {
      display: flex;
    }
    .container {
      width: 50%; /* 左侧占一半宽度 */
      padding: 20px;
      border: 1px solid #ccc;
    }
    .sidebar {
      width: 50%; /* 右侧占一半宽度 */
      padding: 20px;
      border: 1px solid #ccc;
      display: none;
    }

  </style>
</head>
<body>
<div class="container">
  <!-- 这里放你的原始内容 -->
  <div style="height: 80px">
    <h3>测试服务器ip： 223.70.139.221</h3>
    <h3>测试服务器端口： 8888;</h3>
    <hr>
  </div>
  <div class="layui-btn-container">
    <h3 style="color: red">``` PDF 单规则签章:</h3><br>

    <!-- HTML部分 -->
    <form id="pdfForm"  enctype="multipart/form-data">
      <h4>签章规则编号<span style="color: red">（必填）</span></h4>
      <input type="text" name="SingleruleNum" value="3D9AF718498FF4E8"  id="SingleruleNum" placeholder="" style="width: 300px" class="layui-input">


      <h4>选择pdf文件</h4>
      <input type="file"  id="fileInput"  name="file" class="layui-btn demo-class-accept">
      <input type="button"  value="提交" id="submitButton" onclick=" check()" class="layui-btn demo-class-accept">
      <input type="button"  value="下载签章文档" id="downloadButton" onclick=" download()" class="layui-btn demo-class-accept">

    </form>

    <div class="layui-btn-container">



    </div>
    <div style="height: 80px">
      <!-- ... -->
    </div>
  </div>
</div>
<div class="sidebar" id="sidebarContent">
  <div class="layui-form">

    <hr class="ws-space-16">
    <textarea name="" placeholder="多行文本框" class="layui-textarea" style="height: 300px">

        </textarea>
  </div>
  <br>
  <button id="closeSidebarButton" class="layui-btn layui-btn-sm">关闭</button>
</div>

<!-- JavaScript部分 -->
<script src="//unpkg.com/layui@2.8.0/dist/layui.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>



<script>


  // 生成随机字符串
  function generateRandomString(length) {
    const characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    let randomString = '';
    for (let i = 0; i < length; i++) {
      const randomIndex = Math.floor(Math.random() * characters.length);
      randomString += characters.charAt(randomIndex);
    }
    return randomString;
  }
  function download(){

// 生成随机文件名
    const randomFileName = generateRandomString(24) + '.pdf';
    let that = this;
    this.loading = true;
    var xhr = new XMLHttpRequest(); // 用这种原生请求下载后端返回的二进制流打开就不会出现空白
    xhr.open(
            "get",
            "/downloadsignruleSeal",
            true
    );
    xhr.responseType = "blob";
    xhr.onload = function() {
      that.loading = false;
      const url = window.URL.createObjectURL(this.response);
      const link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", randomFileName);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    };
    xhr.send();




  }
  function check() {

    var fileInput = $("#fileInput");
    var Singlerule = document.getElementById("SingleruleNum").value
    if (Singlerule === ""  ) {
      alert("签章规则未填写");
      return false;
    }


    if (fileInput.get(0).files.length === 0) {
      alert("未选择文件");
      return false;
    }

    var formData = new FormData($("#pdfForm")[0]);
    $.ajax({
      url: "/signruleSeal",
      type: "POST",
      data: formData,
      processData: false,
      contentType: false,
      success: function(response) {

        if(response.code==200){
          layer.open({
            title: '提示',
            content: "签章成功",
          });
        }
        else {
          layer.open({
            title: '提示',
            content:response.msg ,
          });
        }


      },
      error: function(xhr, status, error) {
        // Handle error response from the server
        alert("服务端错误: " + error);
      }
    });
  }








</script>


</body>
</html>